<template>
  <div>
    <el-table
      :data="dataSources"
      border
      :span-method="objectSpanMethod"
      style="
        width: 99.97%;
        --el-table-border-color: none;
        border-right: 1px #2f4553 solid;
        border-left: 1px #2f4553 solid;
        border-bottom: 1px #2f4553 solid;
      "
      :highlight-current-row="false"
      :header-cell-style="{
        backgroundColor: '#1a2c38',
        color: '#ffffff',
        fontSize: '14px',
        textAlign: 'center',
        borderLeft: '0.5px #2f4553 solid',
        borderTop: '0.5px #2f4553 solid',
        borderBottom: '1px #2f4553 solid'
      }"
      :cell-style="{
        color: '#fff',
        fontSize: '14px',
        textAlign: 'center',
        borderBottom: '0.5px #2f4553 solid',
        borderLeft: '0.5px #2f4553 solid',
        backgroundColor: '#1a2c38'
      }"
      :row-style="{
        color: '#fff',
        fontSize: '14px',
        textAlign: 'center'
      }"
      class-name="my-custom-table"
    >
      <!-- <el-table-column
        prop="name"
        align="center"
        :label="$t('page.vip.level')"
        min-width="80"
      />
        <el-table-column
          prop="provider_name"
          align="center"
          :label="$t('page.vip.cumulativeAmount')"
          min-width="100"
        />
        <el-table-column
          prop="reward"
          align="center"
          min-width="100"
          :label="$t('page.vip.bonusGold')"
        />  -->
      <el-table-column
        v-for="column in columns_"
        :key="column.prop"
        :prop="column.prop"
        :label="_$t(column.label)"
        :min-width="column.width"
      >
        <!-- 插槽：单元格 -->
        <template #default="{ row }">
          <div v-if="column.type === 'img'" class="flex flex-wrap">
            <img
              :src="getTime(item)"
              class="w-[61px] h-[17px] mb-1 ml-1"
              v-for="(item, index) in row[column.prop]"
            />
          </div>

          <div v-else>{{ row[column.prop] }}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { getCurrentInstance, ref, watch } from "vue";
const props = defineProps({
  activeTabPath: {
    type: Array,
    default: () => []
  },
  columns: {
    type: Array,
    default: () => []
  },
  activeTab: {
    type: String,
    default: ""
  },
  isMerge: {
    type: Boolean,
    default: true
  }
});

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (!props.isMerge) return { rowspan: 1, colspan: 1 };

  if (columnIndex === 0) {
    const currentRow = dataSources.value[rowIndex];
    if (!Array.isArray(currentRow.name)) {
      console.warn("currentRow.name is not an array", currentRow);
      return { rowspan: 1, colspan: 1 };
    }

    const startLevel = currentRow.name[0];
    const endLevel = currentRow.name[currentRow.name.length - 1];

    if (rowIndex === startLevel) {
      return getRowspanForStartLevel(rowIndex, startLevel, endLevel);
    } else if (currentRow.name[0] <= endLevel) {
      return { rowspan: 0, colspan: 0 };
    }
  }

  return { rowspan: 1, colspan: 1 };
};

const getRowspanForStartLevel = (rowIndex, startLevel, endLevel) => {
  let rowspan = 1;
  for (let i = rowIndex + 1; i < dataSources.value.length; i++) {
    const nextRow = dataSources.value[i];
    if (!Array.isArray(nextRow.name)) {
      break;
    }
    if (nextRow.name[0] > endLevel) {
      break;
    }
    rowspan++;
  }
  return { rowspan, colspan: 1 };
};

// const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
//   if (!props.isMerge) return;
//   if (columnIndex === 0 && props.isMerge && dataSources.value.length) {
//     console.log("假设第一列需要合并单元格.value", dataSources.value);

//     // 假设第一列需要合并单元格
//     const currentRow = dataSources.value[rowIndex];

//     const startLevel = currentRow.name[0];
//     const endLevel = currentRow.name[currentRow.name.length - 1];

//     // 如果是合并区间的起始行，计算需要合并的行数
//     if (rowIndex === startLevel) {
//       let rowspan = 1;
//       for (let i = rowIndex + 1; i < dataSources.value.length; i++) {
//         if (dataSources.value[i].name[0] > endLevel) {
//           break;
//         }
//         rowspan++;
//       }
//       return {
//         rowspan: rowspan,
//         colspan: 1
//       };
//     }
//     // 如果是合并区间内的行，隐藏这些行的第一列
//     else if (currentRow.name[0] <= endLevel) {
//       return {
//         rowspan: 0,
//         colspan: 0
//       };
//     }
//   }
//   return {
//     rowspan: 1,
//     colspan: 1
//   };
// };
const dataSources = ref([]);
watch(
  () => props.activeTabPath,
  newVal => {
    dataSources.value = newVal;
  },
  {
    deep: true,
    immediate: true
  }
);

const columns_ = ref(props.columns);

watch(
  () => props.columns,
  newVal => {
    columns_.value = newVal;
  },
  {
    deep: true
    // immediate: true
  }
);

const {
  appContext: {
    config: { globalProperties }
  }
} = getCurrentInstance();

const _$t = label => {
  if (!label) return "";
  return globalProperties.$t(label);
};

import v0 from "@/assets/VIP/v-0.png";
import v1 from "@/assets/VIP/v-1.png";
import v2 from "@/assets/VIP/v-2.png";
import v3 from "@/assets/VIP/v-3.png";
import v4 from "@/assets/VIP/v-4.png";
import v5 from "@/assets/VIP/v-5.png";
import v6 from "@/assets/VIP/v-6.png";
import v7 from "@/assets/VIP/v-7.png";
import v8 from "@/assets/VIP/v-8.png";
import v9 from "@/assets/VIP/v-9.png";
import v10 from "@/assets/VIP/v-10.png";

const getTime = items => {
  let key = null;
  switch (items) {
    case 0:
      key = v0;
      break;
    case 1:
      key = v1;
      break;
    case 2:
      key = v2;
      break;
    case 3:
      key = v3;
      break;
    case 4:
      key = v4;
      break;
    case 5:
      key = v5;
      break;
    case 6:
      key = v6;
      break;
    case 7:
      key = v7;
      break;
    case 8:
      key = v8;
      break;
    case 9:
      key = v9;
      break;
    case 10:
      key = v10;
      break;
  }
  return key;
};
</script>

<style lang="scss" scoped>
/*  
// 表格部分样式
 // 最外层透明 */
:deep(.el-table),
:deep(.el-table__expanded-cell) {
  background-color: #1a2c38;
  color: #1a2c38;
  font-size: 24px;
}
.el-table :deep(.el-table__cell) {
  padding: 18px 0;
}
/* 表格内背景颜色  */
:deep(.el-table) th,
:deep(.el-table) tr,
:deep(.el-table) td {
  background-color: #1a2c38;
  border: 0px;
  color: #1a2c38;
  font-size: 24px;
  height: 5px;
  font-family:
    Source Han Sans CN Normal,
    Source Han Sans CN Normal-Normal;
  font-weight: Normal;
}

/* // 去掉最下面的那一条线  */
.el-table::before {
  height: 0px;
}

/* // 设置表格行高度 */
:deep(.el-table__body) tr,
:deep(.el-table__body) td {
  padding: 0;
  height: 44px;
}

/* // 修改高亮当前行颜色 */
:deep(.el-table) tbody tr:hover > td {
  background: #1a2c38 !important;
}

/* // 取消当前行高亮 */
:deep(.el-table) tbody tr {
  pointer-events: none;
}

/* 修改表头样式-加边框 */
/* ::v-deep .el-table__header-wrapper {
  border: solid 1px #04c2ed;
} */

/* // 表格斑马自定义颜色 */
:deep(.el-table__row.warning-row) {
  background: #1a2c38;
}

/* 去掉表格里的padding */
:deep(.el-table) .cell,
.el-table th div {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
